<template>
	<basic-container>
		<avue-crud :option="option" :data="data" :page="page" ref="crud" @search-change="searchChange" @search-reset="searchReset"
		 @current-change="currentChange" @size-change="sizeChange" @row-del="rowDel" @row-update="rowUpdate" @row-save="rowSave"
		 @on-load="onLoad">
			<template slot="code" slot-scope="scope">
				<el-popover placement="right" trigger="hover">
					<vue-qr :text="scope.row.code" :margin="0" :size="150"></vue-qr>
					<el-button size="mini" slot="reference">{{scope.row.code}}</el-button>
				</el-popover>
			</template>
			<template slot="menuLeft">
				<el-button size="mini" type="primary" @click="downExcel">模版下载</el-button>
				<el-upload style="float:right;" :before-upload="beforeUpload" accept="application/vnd.ms-excel"
				 :show-file-list="false" :on-change="importXls">
					<el-button size="mini" type="primary">导入EXCEL</el-button>
				</el-upload>
			</template>
		</avue-crud>
	</basic-container>
</template>

<script>
	import vueQr from 'vue-qr';
	export default {
		components: {
			vueQr
		},
		data() {
			return {
				query: {},
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				option: {
					searchMenuSpan: 4,
					border: true,
					index: true,
					refreshBtn: false,
					excelBtn: true,
					menuWidth: '150px',
					column: [{
							label: "条码信息",
							prop: "code",
							search: true,
							width: "150px",
							slot: true,
							rules: [{
								required: true,
								trigger: "blur"
							}]
						},
						{
							label: "款名",
							prop: "name"
						},
						{
							label: "款号",
							prop: "matnr"
						},
						{
							label: "颜色代码",
							prop: "colorCode"
						},
						{
							label: "颜色",
							prop: "colorName"
						},
						{
							label: "尺码",
							prop: "size"
						},
						{
							label: "体积",
							type: "number",
							value: '0',
							prop: "volume"
						},
						{
							label: "重量",
							type: "number",
							value: '0',
							prop: "weight"
						}
					]
				},
				data: []
			};
		},
		created() {},
		methods: {
			importXls(file) {
				this.$export.xlsx(file.raw)
					.then(data => {
						if (data.header.indexOf('条码信息') == -1 || data.header.indexOf('款名') == -1 ||
							data.header.indexOf('款号') == -1 || data.header.indexOf('颜色代码') == -1 ||
							data.header.indexOf('颜色') == -1 || data.header.indexOf('尺码') == -1 ||
							data.header.indexOf('体积') == -1 || data.header.indexOf('重量') == -1) {
							this.$message({
								type: "error",
								message: "模板格式错误!"
							});
							return false;
						}
						this.list = data.results;
						if (this.list.length > 0) {
							let details = [];
							for (let ele of this.list) {
								let i = this.list.indexOf(ele) + 1;
								if (ele.条码信息.length == 0 || ele.体积.length == 0 || ele.重量.length == 0) {
									this.$message({
										type: "error",
										message: "第 " + i + " 行数据不能为空!"
									});
									return false;
								}
								if (isNaN(ele.体积) || isNaN(ele.重量)) {
									this.$message({
										type: "error",
										message: "第 " + i + " 行体积或重量不是数值型!"
									});
									return false;
								}
								var v = {};
								v.code = ele.条码信息;
								v.name = ele.款名;
								v.matnr = ele.款号;
								v.colorCode = ele.颜色代码;
								v.colorName = ele.颜色;
								v.size = ele.尺码;
								v.volume = ele.体积;
								v.weight = ele.重量;
								details.push(v);
							}
							this.request({
								url: '2/api/BaseProduct/adds',
								method: 'post',
								data: details
							}).then(res => {
								if (res.data.code == 200) {
									this.searchReset();
								}
							});
						}
					})
			},
			beforeUpload() {
				return false;
			},
			downExcel() {
				window.open('/cdn/product.xls')
			},
			rowSave(row, loading, done) {
				this.request({
					url: '2/api/BaseProduct/add',
					method: 'post',
					data: row
				}).then(() => {
					loading();
					this.onLoad(this.page);
					done();
				}, error => {
					done();
					console.log(error);
				});
			},
			rowUpdate(row, index, loading, done) {
				return this.request({
					url: '2/api/BaseProduct/edit',
					method: 'post',
					data: row
				}).then(() => {
					loading();
					this.onLoad(this.page);
				}, error => {
					done();
					console.log(error);
				});
			},
			rowDel(row) {
				this.$confirm("确定数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						return this.request({
							url: '2/api/BaseProduct/remove',
							method: 'post',
							params: {
								ids: row.id
							}
						});
					})
					.then(() => {
						this.onLoad(this.page);
					});
			},
			searchReset() {
				this.query = {};
				this.page.currentPage = 1;
				this.onLoad(this.page);
			},
			searchChange(params, done) {
				this.page.currentPage = 1;
				this.query = params;
				this.onLoad(this.page);
				done();
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			onLoad(page) {
				this.request({
					url: '2/api/BaseProduct/getpages',
					method: 'get',
					params: {
						key: this.query.code == undefined ? '' : this.query.code,
						page: page.currentPage,
						limit: page.pageSize
					}
				}).then(res => {
					const data = res.data
					this.data = data.data;
					this.page.total = data.remark;
				});
			}
		}
	};
</script>

<style>
</style>
